<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>5.8javascript基础-练习与小结</title>
  <style>
    .m-table {
      border-collapse: collapse;/**去掉单元格间隙**/
    }
    .m-table th{
      width: 118px;
      height: 46px;
      background: #e5e5e5;
      border: 1px solid #999999;
      font-family: 'MircosoftYaHei';
      font-size: 16px;
      color: #000000;
      text-align: center;
    }
    .m-table tr{
      background: #facd89;
    }
    .m-table td{
      width: 118px;
      height: 88px;
      border: 1px solid #999999;
      font-size: 14px;
      color: #ffffff;
      text-indent: 10px;
    }
    .m-table td img{
      width: 66px;
      height: 66px;
      vertical-align:middle;/**图片垂直居中**/
    }
    td.tc{
      text-align: center;
      text-indent: 0px;
    }
  </style>
</head>
<body>
  <h3>练习一</h3>
  <p>制作如下人员信息表</p>
  <table class="m-table">
    <caption>
      <h4>人员信息表</h4>
    </caption>
    <thead><!--我是页眉-->
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>爱好</th>
        <th>头像</th>
      </tr>
    </thead>
    <tbody><!--我是主体-->
      <tr>
        <td>张三</td>
        <td>20</td>
        <td>
          <ul>
            <li>
              <i>看书</i>
            </li>
            <li>下期</li>
          </ul>
        </td>
        <td class="tc">
          <img src="./images/img1.jpg">
        </td>
      </tr>
      <tr>
        <td>李四</td>
        <td>22</td>
        <td>
          <ul>
            <li>
              <del>运动</del>
            </li>
            <li>
              <b>打篮球</b>
            </li>
          </ul>
        </td>
        <td class="tc">
          <img src="./images/img2.jpg">
        </td>
      </tr>
      <tr>
        <td>王五</td>
        <td>18</td>
        <td>
          <ul>
            <li>
              <ins>打羽毛球</ins>
            </li>
          </ul>
        </td>
        <td class="tc">
          <img src="./images/img3.jpg">
        </td>
      </tr>
      <tr>
        <td>赵六</td>
        <td>18</td>
        <td>
          <ul>
            <li>唱歌</li>
            <li>跳舞</li>
          </ul>
        </td>
        <td class="tc">
          <img src="./images/img4.jpg">
        </td>
      </tr>
      <tr >
        <td>铁蛋</td>
        <td>18</td>
        <td>
          <ul>
            <li>看书</li>
          </ul>
        </td>
        <td class="tc">
          <img src="./images/img5.jpg">
        </td>
      </tr>
    </tbody>
    <tfoot><!--我是页脚-->
      <tr>
        <td>平均年龄</td>
        <td colspan="3">19.2</td>
      </tr>
    </tfoot>
  </table>
  <script>
    var bodyTrList = document.querySelectorAll(".m-table tbody tr")
    for(var i=0;i<bodyTrList.length;i++){
      if(i%2==0) {
        // 隔行变色处理
        bodyTrList[i].style.background = '#facdaa'
      }
      // 绑定索引值
      bodyTrList[i].index = i
      // 鼠标移到所在行，颜色加深
      bodyTrList[i].onmouseover=function(){
        for(var j=0;j<bodyTrList.length;j++) {
          if(this.index == j) {
            // 当前行-颜色加深
            bodyTrList[j].style.background = '#facd66'
          } else {
            // 其他行，处理单隔变色
            if(j%2==0) {
              bodyTrList[j].style.background = '#facdaa'
            } else {
              bodyTrList[j].style.background = '#facd89'
            }
          }
        }
      }
      // 鼠标移出所在行，颜色还原
      bodyTrList[i].onmouseout=function(){
        // 重新处理隔行变色
        for(var j=0;j<bodyTrList.length;j++) {
          if(j%2==0) {
              bodyTrList[j].style.background = '#facdaa'
          } else {
            bodyTrList[j].style.background = '#facd89'
          }
        }
      }
    }
  </script>
</body>
</html>